<template>
	<div id="AuctionSpecial">
		<x-header :left-options="{showBack: false}" title="零元专场" class="header">
			<a slot="left" @click="back()"><i class="tp-icon icon-black-back"></i></a>
		</x-header>
		<div class="auctionList">
			<ul>
				<li v-for="item in goodsList" @click="skip(item.auction_id)" v-bind:style="{'background-image':'url(/los/uploads/thumb/goods/' + item.goods_id + '_355X200.jpeg)'}">
					<div class="title-bar">
						<img :src="'/los' + item.shop_logo" alt="" />
						<span>{{item.shop_name}}</span>
						<i class="icon-level"></i>
						<label id="label">{{item.shop_score}}</label>
					</div>
					<div class="desc">
						<p>【专场】{{item.goods_name}}</p>
						<span>{{item.bidding_count}}次出价</span>
					</div>
				</li>

			</ul>
		</div>
	</div>
</template>

<script>
	import $ from 'jquery';
	import axios from 'axios';
	import { XHeader } from "vux";
	import CountDown from "vue2-countdown";
	export default {
		data() {
			return {
				goodsList: []
			}
		},
		components: {
			XHeader,
			CountDown
		},
		activated() {
			this.auctionZero();
		},
		methods: {
			auctionZero: function() {
				let _this = this;
				let more = true;
				let page = 1;
				this.$http({
					method: 'GET',
					url: '/los/api/auction/zero.json',
					data: ''
				}).then((result) => {
					if(result.data.code == 1) {
						this.goodsList = result.data.data;
					}
				}).catch((err) => {})
				$(window).scroll(function() {
					//获取网页的总高度
					var htmlHeight = $(document).height();
					//浏览器中的可视高度
					var clientHeight = $(window).height();
					var scrollTop = $(document).scrollTop();
					var overHeight = scrollTop + clientHeight;
					if(overHeight >= htmlHeight * 0.9) {
						if(more == true) {
							more = false;
							page += 1;
							axios.get('/los/api/auction/zero.json?page=' + page).then(function(result) {
								$.each(result.data.data, function(index, val) {
									_this.goodsList.push(val);
								});
								more = true;
								if(result.data.code == 0) {
									more = false;
								}
							}).catch(function(error) {
								console.log(error);
							});
						}
					}
				})
			},
			skip: function(auction_id) {
				location.href = '#/Detail/id/' + auction_id
			},
			back: function() {
				window.history.go(-1);
			}
		}
	}
</script>

<style scoped>
	.header {
		background: #fff;
	}
	
	.auctionList {
		padding: 0.26rem;
		background: #fff;
		position: relative;
	}
	
	.auctionList:before {
		content: " ";
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		height: 1px;
		border-top: 1px solid #e6e6e6;
		color: #e6e6e6;
		transform-origin: 0 0;
		transform: scaleY(0.5);
	}
	
	.auctionList ul li {
		background-size: 100% 100%;
		height: 5.3rem;
		width: 100%;
		overflow: hidden;
		position: relative;
		border-radius: 0.1rem;
		margin-bottom: 0.26rem;
	}
	
	.auctionList ul li .title-bar {
		height: 0.53rem;
		position: absolute;
		top: 0.26rem;
		left: 0.26rem;
		background: rgba(0, 0, 0, .5);
		overflow: hidden;
		border-radius: 0.26rem;
		padding-right: 0.26rem;
	}
	
	.auctionList ul li .title-bar img {
		width: 0.53rem;
		height: 0.53rem;
		border-radius: 50%;
		float: left;
	}
	
	.auctionList ul li .title-bar span {
		display: inline-block;
		height: 0.53rem;
		line-height: 0.53rem;
		float: left;
		font-size: 0.32rem;
		color: #fff;
		margin-left: 0.24rem;
		float: left;
	}
	
	.auctionList ul li .title-bar i {
		margin-left: 0.5rem;
		margin-top: 0.1rem;
		float: left;
	}
	
	.auctionList ul li .title-bar label {
		color: #d58e26;
		line-height: .53rem;
		display: inline-block;
		float: left;
		margin-top: 0.05rem;
		margin-left: 0.1rem;
	}
	
	.auctionList ul li .desc {
		position: absolute;
		bottom: 0;
		line-height: 1.06rem;
		height: 1.06rem;
		width: 100%;
		color: #fefefe;
		font-size: 0.37rem;
		padding: 0 0.26rem;
		background: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .5));
		/*opacity: 0.5;*/
	}
	
	.auctionList ul li .desc p {
		float: left;
	}
	
	.auctionList ul li .desc span {
		float: right;
	}
</style>